<template>
  <div class="moniScore">
    <div class="scoreContent">
      <div class="title">实操模拟错题总结</div>
      <div class="contentInfo">
        <!-- <div class="leftInfo">
          <div class="questionNum">共{{ questionArry.length }}题</div>
          <div class="right">
            正确题数:&nbsp;
            <div>{{ questionArry.length - failNum }}</div>
            &nbsp;题
          </div>
          <div class="fail">
            错误题数:&nbsp;
            <div>{{ failNum }}</div>
            &nbsp;题
          </div>
        </div> -->
        <!-- <img class="jiayou" src="../../assets/jiayou.gif" alt="" /> -->
      </div>
      <div v-if="errorList">
        <div
          v-for="(item, index) in errorList"
          :key="index"
          class="questionInfo"
        >
          <div class="questionTitle">
            {{ index + 1 }}、
            <span
              >{{ item.questionType }}:{{ item.questionName }}「{{
                item.type == "1"
                  ? "单选题"
                  : item.type == "2"
                  ? "判断题"
                  : item.type == "3"
                  ? "多选题"
                  : "实操题"
              }}」</span
            >
          </div>
          <img class="titleImage" :src="'/api' + item.titleImage" alt="" />
          <div
            class="questionOptions"
            v-if="item.type == '1' || item.type == '3'"
          >
            <div v-if="item.optionA">
              A:
              <div v-if="!item.optionA.includes('/')">{{ item.optionA }}</div>
              <img v-else :src="'/api' + item.optionA" alt="" />
            </div>
            <div v-if="item.optionB">
              B:
              <div v-if="!item.optionA.includes('/')">{{ item.optionB }}</div>
              <img v-else :src="'/api' + item.optionB" alt="" />
            </div>
            <div v-if="item.optionC">
              C:
              <div v-if="!item.optionA.includes('/')">{{ item.optionC }}</div>
              <img v-else :src="'/api' + item.optionC" alt="" />
            </div>
            <div v-if="item.optionD">
              D:
              <div v-if="!item.optionA.includes('/')">{{ item.optionD }}</div>
              <img v-else :src="'/api' + item.optionD" alt="" />
            </div>
            <div v-if="item.optionE">
              E:
              <div v-if="!item.optionA.includes('/')">{{ item.optionE }}</div>
              <img v-else :src="'/api' + item.optionE" alt="" />
            </div>
          </div>
          <div
            class="checkedAnswer"
            v-if="item.type == '1' || item.type == '3'"
          >
            <div>已选答案:{{ item.answers }}</div>
            <div>正确答案:{{ item.answer }}</div>
          </div>
          <div class="checkedAnswer" v-if="item.type == '2'">
            <div>已选答案:{{ item.answer == "0" ? "错误" : "正确" }}</div>
            <div>正确答案:{{ item.answer == "0" ? "正确" : "错误" }}</div>
          </div>
        </div>
      </div>
      <div class="noError" v-if="errorList.length <= 0">
        <div>全部回答正确</div>
        <!-- <div>请再接再厉！</div> -->
        <!-- <img src="../../assets/gongxi.gif" alt="" /> -->
      </div>
      <button class="btn" @click="goback">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      errorList: [],
    };
  },
  created() {
    this.errorList = JSON.parse(localStorage.getItem("errorList"));
  },
  methods: {
    goback() {
      this.$router.push({
        name: "textModel",
        params: {
          examineeId: localStorage.getItem("id"),
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.moniScore {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-image: url(../../assets/login/keji2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .scoreContent {
    width: 100%;
    color: #fff;
    margin-bottom: 150px;
    .questionInfo {
      font-size: 28px;
      margin: 20px;
      background-color: #4371e7;
      padding: 30px;
      border-radius: 15px;
      .questionTitle {
        display: flex;
      }
      .titleImage {
        margin: 20px 0;
      }
      .questionOptions {
        display: flex;
        flex-wrap: wrap;
        div {
          min-width: 400px;
          display: flex;

          align-items: center;
          margin: 10px 0;
        }
        img {
          width: 200px;
          height: 200px;
        }
      }
      .checkedAnswer {
        display: flex;
        justify-content: space-around;
      }
    }
    .title {
      max-width: 500px;
      text-align: center;
      font-size: 60px;
      margin: 0 auto 50px;
      padding-top: 20px;
      color: #ffffff;
      font-weight: bold;
    }

    .contentInfo {
      .leftInfo {
        display: flex;
        justify-content: space-around;
        .questionNum {
          font-size: 35px;
          margin: 20px 0;
        }

        .right,
        .fail {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
        }

        .right {
          & > div {
            color: green;
            font-size: 40px;
          }
        }

        .fail {
          & > div {
            color: red;
            font-size: 40px;
          }
        }
      }

      .jiayou {
        width: 300px;
        height: 300px;
      }
    }
    .noError {
      width: 800px;
      margin: 400px auto 0;
      text-align: center;
      div {
        font-size: 80px;
        color: #ffffff;
      }
      img {
        width: 400px;
        height: 400px;
      }
    }
    .btn {
      width: 300px;
      height: 70px;
      font-size: 30px;
      border: none;
      background-color: #0088ff;
      color: #fff;
      position: fixed;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>